<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <!-- 引入Bootstrap相关文件  -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="css/matron_profile.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/angular-cookies.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.4.12/i18n/angular-locale_zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.1.4/ui-bootstrap-tpls.min.js"></script>
    <script src="js/lib/qrcode.js"></script>
    <script src="js/lib/qrcode_UTF8.js"></script>
    <script src="https://cdn.bootcss.com/angular-qrcode/6.2.1/angular-qrcode.min.js"></script>
    <link href="css/custom.bootstrap.css" rel="stylesheet"/>
    <link href="css/datepicker.css" rel="stylesheet"/>
    <script src="js/globalVar.js"></script>

    <title>E家月嫂</title>
</head>
<body ng-controller="profileCtrl">
<!-- 导航栏 -->
<nav class="navbar navbar-default" style="padding-left:30px;width: 100%;">
    <ul class="nav nav-pills nav-justified">

        <li style="min-height:77px; cursor: pointer" ng-click="back()">
            <i class="fa fa-angle-left fa-3x" style="color:blue;"><a href="#" id="back_link">返回上一级</a></i>
        </li>

        <li>
            <div class="navbar-header">
                <p id="page-title">月嫂档案</p>
            </div>
        </li>

        <!--<li>-->
            <!--<div>-->
                <!--<qrcode version="6" error-correction-level="M" size="90" data="{{mobileUrl}}"></qrcode>-->
                <!--<span>分享至手机</span>-->
            <!--</div>-->
        <!--</li>-->

    </ul>
</nav>

<!-- 基本资料 -->
<div ng-controller="baseInfoCtrl" class="row" style="width:100%;">
    <div class="personal-wrapper" style="height:200px;max-width:100%;">
        <div class="col-xs-6" style="min-width: 600px;">
            <div class="head-img" style="margin-top:18px;margin-left: 30px;"><img id="head_img" src="img/headimg.png"
                                                                                  ng-src="{{info.head_img_url}}"
                                                                                  width="165px;" height="180px;"/></div>
            <div class="personal-info">
                <div class="personal-info-item-display">
                    <span>编号：</span>
                    <span>{{mid}}</span>
                </div>
                <div class="special-personal-info-item-display">
                    <span>姓名：</span>
                    <span id="name">{{info.name}}</span>
                    <div class="check-div"><span>实名认证</span><i class="fa fa-check-circle-o"></i></div>
                    <div class="check-div"><span>健康证</span><i class="fa fa-check-circle-o"></i></div>
                </div>
                <div class="personal-info-item-display">
                    <span>年龄：</span>
                    <span id="age">{{info.age}}</span>
                </div>
                <div class="personal-info-item-display">
                    <span>籍贯：</span>
                    <span id="birth_place">{{info.birth_place}}</span>
                </div>
                <div class="personal-info-item-display">
                    <span>学历：</span>
                    <span id="xl">{{info.education}}</span>
                </div>
            </div>
        </div>

        <div class="col-xs-6" style="height:100%; min-width: 230px;">
            <div class="personal-video-item">
                <video id="intro_video" class="intro-video" ng-src="{{info.intro_video_url | trustUrl}}"
                       controls="controls"
                       style="width:400px; height:180px;border:1px solid #aaaaaa;"></video>
            </div>
        </div>

    </div>
</div>

<!-- 资格证书 -->
<div class="row" style="width:100%;" ng-controller="certificateCtrl">
    <div class="personal-wrapper"
         style="max-width:100%;margin-left:30px;margin-right:120px;">
        <div class="certification-header">
            <p style="font-size: 24px;font-weight: bold;padding-left: 15px;">资格证书</p>
        </div>

        <!-- 带职业等级-->
        <div class="certification-line">
            <div class="certification-img" ng-repeat="certificate in certificates">
                <div class="certification-name"><span>{{certificate.name}}</span><img
                        style="width:23px;height:23px;margin-left:15px;"
                        src="img/check-circle.png"></div>
                <div class="certification-serial-div"><span class="certification-title">证书编号：</span><span
                        class="certification-serial">{{certificate.number}}</span></div>
                <div class="certification-rank-div" ng-style="{'visibility':certificate.level!=null? 'visible' : 'hidden'}"><span class="certification-title">技能等级：</span><span
                        class="certification-rank">{{certificate.level}}</span></div>
                <div style="width:200px;height:122px;overflow:hidden;margin-left:15px;position: relative;bottom: 0">
                    <img src="img/certification-img.png" ng-src="{{certificate.img_url}}">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 培训经验 -->
<div class="row" style="width:100%;" ng-controller="trainCtrl">
    <div class="personal-wrapper secondary"
         style="max-width:100%;margin-left:30px;margin-right:120px;">
        <div class="certification-header">
            <p style="font-size: 24px;font-weight: bold;padding-left: 15px;color: black">培训经验</p>
        </div>

        <div class="certification-second-header">
            <span style="font-size:21px;">母婴护理专项职业能力培训：</span>
        </div>
        <div class="certification-line" style="width: 1000px">
            <div class="certification-img" ng-repeat="exam in exams">
                <div class="certification-name"><span>{{exam.examName}}</span><img
                        style="width:23px;height:23px;margin-left:15px;" src="img/check-circle.png"></div>
                <div class="certification-serial-div"><span class="certification-title">理论成绩：{{exam.t_score}}</span><span
                        class="certification-serial"></span></div>
                <div class="certification-rank-div"><span class="certification-title">实操成绩：{{exam.p_score}}</span><span
                        class="certification-rank"></span></div>
            </div>
            <div style="clear: both"></div>
        </div>

        <div class="certification-second-header">
            <span style="font-size:21px;">跟岗医院：</span>
        </div>

        <div class="certification-line" style="width:650px;">
            <div class="pxjy-certification-img" ng-repeat="h in postHospitals">
                <div class="ggyy-name" style="display:inline-block;"><span>{{h}}</span><img style="width:23px;height:23px;margin-left:10px;"
                                                            src="img/check-circle.png"></div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="certification-second-header">
            <span style="font-size:21px;">其它培训：</span>
        </div>
        <div class="certification-line" style="width:650px;">
            <div class="pxjy-certification-img" ng-repeat="s in trainingSubjects">
                <div class="ggyy-name"><span>{{s}}</span><img style="width:23px;height:23px;margin-left:10px;"
                                                              src="img/check-circle.png"></div>
            </div>
        </div>
    </div>
</div>

<!-- 护理经验 -->
<div class="row container" style="width:100%;" ng-controller="nursingCtrl">
    <div class="personal-wrapper row"
         style="width:670px;max-width:100%;margin-left:30px;margin-right:50px;">
        <div class="certification-header">
            <p style="font-size: 24px;font-weight: bold;padding-left: 15px;">护理经验</p>
        </div>

        <div class="col-xs-6 secondary" >
            <div class="hljy-line">
                <span>护理时长：</span><span style="margin-left:10px;" id="hlsj">{{nursingExp.years}}年</span>
            </div>

            <div class="hljy-line">
                <span>护理数量：</span><span style="margin-left:10px;"
                                        id="jtsl">{{nursingExp.family_num}}</span><span></span>
            </div>

            <div class="hljy-line">
                        <div style="float:left;width:24%;height:60px;">
                            <span>护理经验： </span>
                        </div>
                        <div style="float:right; width:76%;">
                            <div class="jtlx" ng-repeat="x in nursingExp.exp"><span style="padding:5px 10px;">{{x}}</span></div>
                        </div>
            </div>

        </div>

        <div class="col-xs-6" style="min-width:300px; float:right;">

            <div class="rating-number secondary" style="height:100%; float:right;">
                <div class="star-user-number"><span id="five_stars">{{grade[5]}}</span></div>
                <div class="star-user-number"><span id="four_stars">{{grade[4]}}</span></div>
                <div class="star-user-number"><span id="three_stars">{{grade[3]}}</span></div>
                <div class="star-user-number"><span id="two_stars">{{grade[2]}}</span></div>
                <div class="star-user-number"><span id="one_star">{{grade[1]}}</span></div>
            </div>

            <div class="user-rating" style="width:160px;float:right;">
                <div class="star-rating">
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                    <div class="star-number">
                        <i class="fa fa-star icon-padding" aria-hidden="true"></i>
                    </div>
                </div>
            </div>

            <div class="user-judge secondary" style="width:80px;float:right;">
                <div style="margin-top:5px;"><span>用户评价：</span></div>
                <div style="margin-top:20px;"><span style="font-size: 24px;">{{avgGrade|number:1}}分</span></div>
            </div>

        </div>
    </div>

    <div class="row container-fluid text-center" style="width:700px;margin: 0 12px;align-items: center;display: -webkit-flex">
        <div class="col-xs-1 container-fluid">
            <div class="row" style="background-color: #E2E2E4;border-radius: 20px;color: #939394;padding: 5px 0">
                <div class="date-clickable"
                     style="display: inline-block;"
                     ng-click="preYear()">
                    <i class="fa fa-caret-left" aria-hidden="true"></i>
                </div>
                <div style="display: inline-block;margin: 0 10px">{{yearToSelect}}</div>
                <div style="display: inline-block;"
                     ng-click="nextYear()"
                     ng-class="{'date-clickable':yearToSelect<today.getFullYear(),'date-disabled':yearToSelect>=today.getFullYear()}">
                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                </div>
            </div>
        </div>
        <div class="col-xs-11">
            <div class="col-xs-1" ng-repeat="x in [0,1,2,3,4,5,6,7,8,9,10,11]">
                <div class="month circle"
                     ng-class="{'filled-circle':servingMonths.indexOf(x+1)!=-1,
                     'cur-month':x===month&&yearToSelect===year}"
                     ng-click="clickMonth(x)">
                    {{x+1}}
                </div>
            </div>
        </div>
    </div>

    <div style="margin-left:30px;margin-top:20px">
        <div class="col-xs-4 container-fluid">

            <div class="container-fluid" style="background-color: #E2E2E4;border-radius: 8px;color: #939394">
                <div class="text-center row">
                    <div class="col-xs-1-7">日</div>
                    <div class="col-xs-1-7">一</div>
                    <div class="col-xs-1-7">二</div>
                    <div class="col-xs-1-7">三</div>
                    <div class="col-xs-1-7">四</div>
                    <div class="col-xs-1-7">五</div>
                    <div class="col-xs-1-7">六</div>
                </div>
                <div class="text-center row" ng-repeat="weekDates in selectedMonthCalendar">
                    <div class="col-xs-1-7" ng-repeat="date in weekDates"
                         ng-class="{'serve-day':isServeDay(date),'active':isActive(date)}">
                        <div ng-if="inSelectedMonth(date)"
                             ng-class="{'today':isToday(date),'date-clickable':isServeDay(date)&&!isActive(date),'date-disabled':date.getTime()>today.getTime()}"
                             ng-click="onDateClick(date)">
                            {{date.getDate()}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid"
                 style="background-color: #F3F3F8; border-radius: 8px;color: #939394;margin-top: 5px">
                <div class="text-center row" ng-repeat="weekDates in nextMonthCalendar">
                    <div class="col-xs-1-7" ng-repeat="date in weekDates"
                         ng-class="{'serve-day':isServeDay(date)&&inNextMonth(date),'active':isActive(date)&&inNextMonth(date)}">
                        <div ng-if="inNextMonth(date)"
                             ng-class="{'today':isToday(date),'date-clickable':isServeDay(date)&&!isActive(date),'date-disabled':date.getTime()>today.getTime()}"
                             ng-click="onDateClick(date)">
                            {{date.getDate()}}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-xs-8">
            <div class="record-wrapper secondary" style="float:left;" ng-if="record!=null">
                <div class="record-upper">
                    <i class="fa fa-angle-left fa-3x left"
                       ng-class="{'record-icon':records.indexOf(record)>0||preMonthStr!=null}"
                       ng-click="preRecord()"></i>
                    <div class="record-title">
                        <div><span class="black-span">雇主：</span><span class="black-span">{{record.employer}}</span>
                        </div>
                        <div><span class="black-span">服务时间：</span><span class="black-span">{{record.start | date:'yyyy.M.d'}}-{{record.end | date:'M.d'}}</span>
                        </div>
                    </div>
                    <i class="fa fa-angle-right fa-3x right"
                       ng-class="{'record-icon':records.indexOf(record)<records.length-1||nextMonthStr!=null}"
                       ng-click="nextRecord()"></i>
                </div>
                <div class="record-center" style="text-align: center;margin-top:20px;margin-bottom:30px;">
                    <span class="evaluate-span secondary">评价：</span>
                    <div class="evaluate-star">
                        <i class="fa fa-star icon-red" aria-hidden="true" ng-repeat="x in record.temp"></i>
                    </div>
                    <span class="evaluate-span" style="padding-left:20px;">评价时间：</span><span class="evaluate-span"
                                                                                             id="evaluate_time">{{record.create_date|date:'yyyy.M.d'}}</span>
                </div>
                <div class="record-bottom">
                    <div class="evaluate-content">
                        <span>{{record.comment}}</span>
                    </div>
                </div>
            </div>
            <div class="record-wrapper" ng-if="records==null">
                历史服务记录整理中
            </div>
            <div class="record-wrapper" ng-if="records!=null&&record==null">
                本月没有服务记录
            </div>
        </div>
    </div>
</div>

<!-- 月嫂风采 -->
<div class="row" style="width:100%;" ng-controller="workingPhotoCtrl">
    <div class="personal-wrapper"
         style="height:600px;overflow: hidden;max-width:100%;margin-left:30px;margin-right:120px;">
        <div class="certification-header">
            <p style="font-size: 24px;font-weight: bold;padding-left: 15px;">月嫂风采</p>
        </div>

        <div class="certification-img" ng-repeat="photo in photos">
            <div class="ggyy-name"><span>{{photo.tags[0]}}</span></div>
            <div style="width:200px;height:122px;overflow:hidden;margin-left:15px;">
                <img src="img/certification-img.png" ng-src="{{photo.url}}">
            </div>
        </div>
    </div>

</div>

<script src="js/matron_profile.js"></script>
<script src="js/maternity.service.js"></script>
<script src="js/record.service.js"></script>
<script src="js/training.service.js"></script>
</body>
</html>